<template>
    <div class="home">
        <!-- 头 -->
        <header>
            <div class="w clearfix">
                <!-- 登录...购物车 -->
                <ol class="fr clearfix">
                    <li class="fl"><span>登录</span>|<span>注册</span></li>
                    <li class="fl"><span>我的订单</span></li>
                    <li class="fl"><span>我的收藏</span></li>
                    <li class="fl"><el-icon><ShoppingCart /></el-icon>购物车(0)</li>
                </ol>
            </div>
        </header>
            <!-- 导航 -->
            <nav>
                <div class="w">
                    <img src="../assets/imgs/logo.png" alt="">
                    <ol class="clearfix">
                      <li class="fl"><router-link to="/home">首页</router-link></li>
                      <li class="fl"><router-link to="/goods">全部商品</router-link></li>
                      <li class="fl"><router-link to="/about">关于我们</router-link></li>
                    </ol>
                    <div class="input_box clearfix">
                         <el-input  class="fl search_input" v-model="input" placeholder="请输入搜索内容" clearable />
                         <el-button class="fr search_button"><el-icon><Search /></el-icon></el-button>
                    </div>
                </div>
            </nav>
        <!-- 内容 -->
        <router-view></router-view>
        <!-- 脚 -->
        <footer>

        </footer>
    </div>
</template>
<script setup>
import { ShoppingCart,Search } from '@element-plus/icons-vue'
import { ref ,onMounted } from 'vue'
</script>
<style lang="scss" scoped>
    .home{
        width: 100%;
        header{
            height: 40px;
            background-color: rgb(32, 32, 32);
            .w{
                height: 100%;
                // background: pink;
                ol{
                    li{
                        font-size: 14px;
                        line-height: 40px;
                        padding: 0 10px;
                        color: #ccc;
                        &>span{
                            padding: 0 10px;
                        }
                        span:hover{
                            color: #fff;
                        }
                    }
                    li:last-child{
                        background: rgb(49, 49, 49);
                        padding: 0 20px;
                    }
                    li:last-child:hover{
                        background: #fff;
                        color: red;
                    }
                }
            }
        }
        nav{
            margin-top: 20px;
            // background-color: #ccc;
            &>.w{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
                ol{
                    height: 100%;
                    width: 500px;
                    li{
                        color: #777;
                        a{
                            display: inline-block;
                            padding: 20px;
                        }
                    }
                    li>a:hover{
                        color: #000;
                    }
                    li>.router-link-active{
                        color: rgb(30, 127, 238);
                        border-bottom: 2px solid rgb(30, 127, 238);
                    }
                }
                .input_box{
                    width: 300px;
                    margin-top: 16px;
                    height: 34px;
                    border: 1px solid #ccc;
                    background: #fff;
                    border-radius: 3px;
                    .search_input{
                        height: 100%;
                        width: 254px;
                        border-radius: 0px;
                        border: 0;
                    }
                    .search_button{
                        border-radius: 0px;
                        height: 100%;
                        border-left: 1px solid #ccc;
                    }
                }
            }
        }
    }
</style>